<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <!--<link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">-->
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">

</head>
<body class="gray-bg">
<div class="wrapper">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form class="form-inline" id="query_form" autocomplete ="off">
                    <div class="form-group">
                        <label class="control-label" for="username">用户名:</label>
                        <input type="text" class="form-control" placeholder="请输入用户名" id="username" name="username">
                    </div>
                    <button type="button" class="btn btn-primary" id="query_list"><span class="bold">查询</span></button>
                    <button type="button" class="btn btn-success" id="insert_record"><span class="bold">添加</span></button>
                    <button type="button" class="btn btn-default" id="reset_form"><span class="bold">重置</span></button>
                </form>
            </div>

        </div>
    </div>
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>用户列表</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-hover" id="bootstrap-table" th:data-url='@{/user/queryList.do}'
                       data-toggle="table"
                       data-pagination="true"
                       data-side-pagination="server"
                       data-query-params="queryParams"
                       data-query-params-type="no"
                       data-toolbar-align="left">
                    <thead>
                    <tr>
                        <th data-field="username">用户名</th>
                        <th data-field="realname">姓名</th>
                        <th data-field="roleName">角色</th>
                        <th data-field="emailAddress">邮箱</th>
                        <th data-align="center" data-width="250px" data-field="userId" data-formatter="operationFormatter">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script th:inline="javascript">
    /**
     * 查询数据列表传参数
     * @param params
     * @returns {{current: (number|*), size: (number|*)}}
     */
    function queryParams(params) {
        var param = {};
        $('#query_form').find('[name]').each(function () {
            var value = $(this).val();
            if (value !== '') {
                param[$(this).attr('name')] = value;
            }
        });
        param['current'] = params.pageNumber;   //页面大小
        param['size'] = params.pageSize;   //页码
        param['descs'] = 'create_time';
        return param;
    }

    /**
     * 初始化操作按钮
     * @param value
     * @param row
     * @param index
     */
    function operationFormatter(value, row, index) {
        var id = value;
        var result = "";
        result += "<a href='javascript:;' class='btn btn-white btn-sm' onclick=\"showModel('" + id + "', type='view')\" title='查看'><i class=\"fa fa-folder\"></i> 查看 </a>";
        result += "<a href='javascript:;' class='btn btn-white btn-sm' onclick=\"showModel('" + id + "', type='edit')\" title='编辑'><i class=\"fa fa-pencil\"></i> 编辑</a>";
        result += "<a href='javascript:;' class='btn btn-white btn-sm' onclick=\"deleteById('" + id + "')\" title='删除'><i class=\"fa fa-remove\"></i> 删除</a>";
        return result;
    }

    /**
     * 根据ID删除数据
     * @param id
     */
    function deleteById(id) {
        parent.layer.confirm("确认删除数据？", {btn: ['确定', '取消'], title: "提示"}, function () {
            $.ajax({
                type: "get",
                url: [[${ctx}]] + "/user/delete.do",
                data: {userId: id},
                dataType: "json",
                success: function (data) {
                    if (data.result) {
                        parent.layer.msg('删除成功', {icon: 1});
                        $("#bootstrap-table").bootstrapTable('refresh');
                    } else {
                        parent.layer.msg('删除失败', {icon: 2});
                    }
                }
            });
        });
    }

    /**
     * 修改或查询数据详情
     * @param id
     * @param type
     */
    function showModel(id, type) {
        var content;
        if(type=='insert'){
            content = [[${ctx}]] + "/user/view.do"
        }else if(type=='edit'){
            content = [[${ctx}]] + "/user/view.do?userId=" + id;
        }else{
            content = [[${ctx}]] + "/user/view.do?userId=" + id;
        }

        top.layer.open({
            type: 2,
            title: '修改用户信息',
            shadeClose: true,
            shade: 0.6,
            offset: 'auto',
            area: ['55%', '50%'],
            content: content,
            success: function (layero, index) {
                // 获取子页面的iframe
                // var body = parent.layer.getChildFrame('body', index);
                var iframe = top.window[layero.find('iframe')[0]['name']];

                // 向子页面的全局函数shoWay传参
                iframe.shoWay(type);
            },
            end: function () {
                $("#bootstrap-table").bootstrapTable('refresh');
            }
        });
    }

    /**
     * 条件查询
     */
    $("#query_list").click(function () {
        $("#bootstrap-table").bootstrapTable('refresh',{query: {current: 1}});
    });

    /**
     * 重置表单
     * resetForm
     */
    $("#reset_form").click(function () {
        $('#query_form')[0].reset();
    })

    /**
     * 跳转添加页面
     */
    $('#insert_record').click(function () {
        showModel(null, 'insert');
    })
</script>
</body>
</html>